<template>
  <div class="register">
    <!-- 注册 -->

    <el-form :model="user" status-icon :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
      <el-form-item label="" prop="keys">
        <el-input type="text" v-model.trim="user.keys" auto-complete="off" :placeholder="lang.text7" :maxlength="50"></el-input>
      </el-form-item>
      <el-form-item label="" prop="email">
        <el-input type="text" v-model.trim="user.email" auto-complete="off" :placeholder="lang.text1" :maxlength="50">
          <el-button slot="append" class="email" @click="registerEmail">{{lang.text8}}</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="" prop="code">
        <el-input type="text" v-model.trim="user.code" auto-complete="off" :placeholder="lang.text9" :maxlength="8"></el-input>
      </el-form-item>
      <el-form-item label="" prop="password">
        <el-input type="password" v-model.trim="user.password" auto-complete="off" :placeholder="lang.text2" :maxlength="20"></el-input>
      </el-form-item>

      <el-form-item class="radius" v-show="false">
        <el-checkbox v-model="user.memory">{{lang.text10}}</el-checkbox><i class="xy" @click="dialogShow = true">{{lang.text11}}</i>
      </el-form-item>
      <el-form-item>
        <el-button class="sure" :disabled="status" @click="submitForm('ruleForm')">{{lang.text12}}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="route('/login')">{{lang.text13}}</el-button>
      </el-form-item>
    </el-form>

    <el-dialog :visible.sync="dialogVisible">
      <span class="cont">{{lang.text14}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" @click="dialogVisible = false">{{lang.text15}}</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { notice } from '../utils/res.js'
export default {
  name: 'register',
  data () {
    var validateEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('邮箱不为空'))
      } else if (!(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/).test(value)) {
        return callback(new Error('请输入正确格式邮箱'))
      } else {
        callback()
      }
    }
    var validateKey = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入公钥'))
      } else if (!(/^0x/).test(value)) {
        return callback(new Error('请输入正确格式公钥'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    var validateCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入验证码'))
      } else {
        callback()
      }
    }
    return {
      lang: {
        text1: '邮箱',
        text2: '密码',
        text3: '记住登录',
        text4: '忘记密码？',
        text5: '登录',
        text6: '沒有账户？点击注册',
        text7: '钱包地址',
        text8: '发送验证码',
        text9: '验证码',
        text10: '我已阅读并同意',
        text11: '《用户协议》',
        text12: '注册',
        text13: '返回',
        text14: '如果您在收件箱沒有找到邮件，不要忘记去垃圾邮箱看看哦！',
        text15: '我知道啦',
        text16: '用户协议',
        text17: '确认密码',
        text18: '提交'
      },
      user: {
        email: '',
        password: '',
        keys: '',
        memory: false
      },
      rules: {
        email: [
          { validator: validateEmail, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        code: [
          { validator: validateCode, trigger: 'blur' }
        ],
        keys: [
          { validator: validateKey, trigger: 'blur' }
        ]
      },
      code: '',
      dialogVisible: false,
      dialogShow: false,
      status: false
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.status = true
          let res = await this.$store.dispatch('register', {
            email: this.user.email,
            code: this.user.code,
            password: this.user.password,
            wallet_key: this.user.keys,
            language: 'cn',
            invite_code: this.code
          })
          this.status = false
          console.log(res)
          if (res.RET === 1) {
            this.$router.push('/')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    route (r) {
      this.$router.push({path: r, query: this.$route.query})
    },
    registerEmail () {
      if (!this.user.email) {
        notice('邮箱不为空')
        return
      }
      this.$store.dispatch('registerEmail', {
        email: this.user.email,
        language: 'cn'
      }).then(res => {
        if (res.RET !== 1) return
        this.dialogVisible = true
      })
    }
  },
  created () {
    let code = window.location.href.split('lucky=')[1]
    if (code) {
      code = code.split('&')[0]
    }
    console.log(code)
    this.code = code
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/variable.scss';
.register {
  padding-top: 20px;
  // padding-bottom: 20px;
  .el-form {
    margin: 0 auto;
    max-width: 300px;

    .el-form-item {
      .el-button {
        width: 100%;
      }
    }

    .forget {
      float: right;
      cursor: pointer;
      font-size: 12px;
      text-decoration: underline;
    }

    .sure {
      // background: $theme !important;
      // color: $white;
      border: none;
    }

    .email {
      width: auto !important;
    }
  }

  .xy {
    // cursor: pointer;
    color: $theme;
  }
}
</style>
<style lang="scss">
@import '../assets/scss/variable.scss';
.register {
  .el-dialog {
    min-width: 300px;
    // color: #ccc;
    p {
      line-height: 30px;
      white-space: pre-line;
    }

    span.cont {
      // color: #fff;
      line-height: 30px;
    }
  }

  .el-dialog__body p {
    height: 500px;
    overflow: auto;
  }
  .el-dialog__title {
    color: #fff;
  }
}
</style>
